<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element布局</title>
    <style>
        .el-row {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark"></div>
        </el-col>
    </el-row>
    <!--一行分为24个分栏，2个分栏的话一个分栏占12-->
    <el-row>
        <el-col :span="12">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="8">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="8">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="8">
            <div class="grid-content bg-purple"></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="6">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
    </el-row>
    <!--
添加一行，8个格子  24/8 = 3
-->
    <el-row>
        <el-col :span="3">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
    </el-row>
</div>

</body>
</html>